import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'
import postcsstovp from 'postcss-px-to-viewport'
import { createVuePlugin } from 'vite-plugin-vue2'

const loader_pxtovw = postcsstovp({
  viewportWidth: 1920,
  viewportUnit: 'vw',
  selectorBlackList: ['h5', 'el'], // 忽略的CSS选择器
})
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 自动引入
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  // createVuePlugin(), // 注意：需要放在最后
  css: {
    postcss: {
      plugins: [loader_pxtovw],
    },
  },
  resolve: {
    // 省略 重写
    alias: {
      '@': path.resolve(__dirname, './src'),
      vue: 'vue/dist/vue.esm-bundler.js',
    },
    extensions: ['.js', '.json', '.css', '.ts'],
  },

  server: {
    port: 3000, //端口
    proxy: {
      '/api': {
        target: '127.0.0.1/', //请求转发
        changeOrigin: true,
        rewrite: (path) => path.replace(null, ''), //将null转为‘’
      },
    },
    host: '0.0.0.0',
  },
  build: {
    rollupOptions: {
      input: './index.html',
      output: {
        dir: 'my-vite-dir.js', //指定路径
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash][extname]',
        manualChunks(id) {
          if (id.includes('element-plus')) {
            return 'element-plus'
          }
        },
      },
    },
    assetsInlineLimit: 20000, //<20kb的就转base64
  },
})
